<!--
 * @Author: lxw
 * @Date: 2021-02-22 15:31:14
 * @Description: 文章详情页
 -->
<template>
  <div>
    <v-card>
      <v-card-title>{{ detailsData.title }}</v-card-title>
      <div class="d-flex pl-4 pr-4">
        <span>{{ detailsData.author }}</span>
        <span class="ml-2 grey--text">发布于 {{ detailsData.publishedAt | fromNow }}</span>
        <span class="ml-auto"><v-icon class="ml-5 mr-1" size="14">mdi-eye-outline</v-icon>{{ detailsData.views }}</span>
        <span><v-icon class="ml-5 mr-1" size="14">mdi-comment-outline</v-icon>{{ comments.length }}</span>
        <span><v-icon class="ml-5 mr-1" size="14">mdi-heart-outline</v-icon>{{ detailsData.likeCounts }}</span>
      </div>
      <v-divider class="mt-5 mb-5" />
      <v-card-text v-html="detailsData.content" />
    </v-card>

    <v-card-title>
      评论<span class="grey--text text-truncate">({{ comments.length }})</span>
    </v-card-title>
    <v-card class="rounded">
      <v-list>
        <v-list-item v-for="item of comments" :key="item._id">
          <v-list-item-avatar>
            <v-img :src="item.headUrl" />
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>{{ item.userName }}</v-list-item-title>
            <v-list-item-subtitle v-if="item.parentId" class="mt-2">
              回复 <span class="text--primary">@{{ item.secondParentName }}</span> {{ item.comment }}
            </v-list-item-subtitle>
            <v-list-item-subtitle v-else class="mt-2">{{ item.comment }}</v-list-item-subtitle>
            <span class="mt-1 grey--text text-caption">{{ item.createdAt | fromNow }}</span>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetails',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      detailsData: {},
      comments: []
    }
  },
  watch: {
    id: {
      immediate: true,
      handler () {
        this.getData()
        this.getComments()
      }
    }
  },
  methods: {
    async getData () {
      const { data } = await this.$apis.queryGirlDetails(this.id)
      this.detailsData = data
    },
    async getComments () {
      const { data } = await this.$apis.listComments(this.id)
      this.comments = data.map(cur => JSON.parse(cur))
      // const list = []
      // for (let i = 0; i < data.length; i++) {
      //   const item = JSON.parse(data[i])
      //
      //   if (item.parentId) {
      //     const parentChildren = list[i - 1].children
      //     if (parentChildren) {
      //       parentChildren.push(item)
      //     } else {
      //       list[i - 1].children = [item]
      //     }
      //   } else {
      //     list.push(item)
      //   }
      // }
      //
      // this.comments = list.reverse()
    }
  }
}
</script>

<style scoped>

</style>
